<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0 ;
		}
		body{
			background-color: #eee;
		}
		.box{
			width: 200px;
			position: relative;
			top: 400px;
/*			animation: move1 1s linear forwards ;*/
			animation: physicsBounce 2s infinite;
		}
		.box>div{
			height: 50px;

		}
		.one{
			background-color: red;
		}
		.two{
			background-color: white;
		}
		.thrre{
			background-color: blue;
		}
		@keyframes move1{
			0%{
				top: 400px;
				opacity: 0%;
			}
			30%{
				opacity: 100%;
			}
			100%{
				top: 0;
			}
		}
		@keyframes physicsBounce {
		  0% {
		    top: 50px;
		    left: 50px;
		    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
		  }
		  25% {
		    top: 210px;
		    left: 210px;
		    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		  }
		  50% {
		    top: 50px;
		    left: 210px;
		    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
		  }
		  75% {
		    top: 210px;
		    left: 50px;
		    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		  }
		  100% {
		    top: 50px;
		    left: 50px;
		    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  }
}
	</style>
</head>
<body>
	<div class="box">
		<div class="one"></div>
		<div class="two"></div>
		<div class="thrre"></div>
	</div>
</body>
</html>